﻿$(document).ready(function () {
    /**
    * I am using the jQuery live binding method as the tables I deal with will be loaded via Ajax  in most cases.
    * If you use this script and the page is static, rather than full of dynamically loaded content, you can just bind
    * click event like normal.
    */

    $('table tbody a.control').live('click', function (e) {
        e.preventDefault();

        // To allow the control links to be buried anywhere in the table (rather than at two deep)
        // The following uses the jQuery parent() function to cycle up through parents until the TR is found
        // To avoid an infinite loop (due to HTML error or other misnomer), there is a max iteration count set of 100
        var tr = $(this); // Start with this link and work upwards from there, this allows the TR element itself to be the control if desired
        var iterations = 0;
        while (tr.attr('tagName') != 'TR') {
            tr = tr.parent();
            iterations += 1;
            if (iterations == 100) {
                return false; // Bail out, surely something is wrong or there is lots and lots of html in there
            }
        }

        // Now that the TR tag has been stored in the tr variable, check the rel attribute of the link that has been clicked  ( $(this) ) to see what direction to move
        // To fine the previous sibling inside the <tbody> tag, the jQuery prev() function is used and to find the next element,
        // surprisingly enough, the jQuery next() element is used. 
        // The TR element will only be moved if there IS a sibling , otherwise the function is exited

        if ($(this).attr('rel') == 'up' && tr.prev().length)
        // This next part is here mainly for show. The fading in and out isn't required. To simply move up
        // or down, just use tr.insertBefore(tr.prev()) or tr.insertAfter(tr.next())
        // The code below uses the jQuery fadeTo function to fade to 0.1 opacity (not fadeOut as that causes jerkiness when
        // the element is hidden after fading out), then does the move inside a callback function before fading back in.

            tr.fadeTo('medium', 0.1, function () {
                tr.insertBefore(tr.prev()).fadeTo('fast', 1);
                // If you want to do any more to the table after the move put it here, I am running the reorder function (defined below)
                reorder();
            });
        else if ($(this).attr('rel') == 'down' && tr.next().length)
        // Same as above only this is for moving elements down instead of up
            tr.fadeTo('fast', 0.1, function () {
                tr.insertAfter(tr.next()).fadeTo('fast', 1);
                // If you want to do any more to the table after the move put it here, I am running the reorder function (defined below)
                reorder();
            });
        else
        //Can't do anything with these
            return false;






        return false;
    });
    // If you need nothing more than just to move rows up and down, you can leave it at that!
    // This next part cycles through all of the TR elements putting the zebra-striping back in the correct places
    // It also renumbers the positions so they are in the correct sequential order (this was a requirement for my task)
    function reorder() {
        var position = 1;
        $('table tbody tr').each(function () {
            // Change the text of the first TD element inside this TR  
            $('td:first', $(this)).text(position);
            //Now remove current row class and add the correct one
            $(this).removeClass('row1 row2').addClass(position % 2 ? 'row1' : 'row2');

            position += 1;

        });
    }
});
 
